<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2024-11-19 11:34:40
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-09-01 10:20:44
 * @FilePath: /XMate-h5/src/views/myXmate/components/listHead.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="flex flex-row justify-between items-center h-[70px] pr-4">
    <van-search
      ref="searchInput"
      v-model="searchValue"
      :show-action="isSearching"
      background="transparent"
      placeholder="搜索"
      @search="doSearch"
      @cancel="onCancel"
      @focus="onSearchFocus"
      @blur="onSearchBlur"
      @clear="onClear"
      class="flex-grow"
    />
    <div
      v-if="!isSearching"
      class="flex flex-row justify-end items-center transition-all duration-300"
    >
      <slot name="right"></slot>
      <van-dropdown-menu class="filter-menu" active-color="#436BFF">
        <van-dropdown-item
          v-if="enableDrpt"
          v-model="currentDrpt"
          :options="reportTypeOptions"
          :title="drptTitle"
          @open="handleOpenDrptFilter"
        />
        <van-dropdown-item title="筛选" @open="handleOpenFilter" />
      </van-dropdown-menu>
    </div>
  </div>
</template>

<script setup>
import { ref, defineEmits, defineProps } from "vue";

const emits = defineEmits(["search", "filter", "drptFilter", "update:searchValue"]);

const isSearching = ref(false);

defineProps({
  enableDrpt: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  drptTitle: {
    type: String,
    default: () => {
      return "全部部门";
    },
  },
});

const currentDrpt = ref("");
const currentReportTypeText = ref("全部部门");
const reportTypeOptions = ref([
  { text: "华中大区", value: 0 },
  { text: "华中1大区", value: 1 },
  { text: "华中2大区", value: 2 },
]);

// const cp_searchValue = computed({
//   get: () => props.searchValue.value,
//   set: val => {
//     emits("update:searchValue", val);
//   }
// });
const searchValue = ref("");
const searchInput = ref(null);

function handleOpenFilter() {
  emits("filter");
}

function handleOpenDrptFilter() {
  emits("drptFilter");
}

function onClear() {
  searchValue.value = "";
  doSearch("");
}

function doSearch() {
  console.log("doSearch", searchValue.value);
  emits("search", searchValue.value);
}

function onCancel() {
  isSearching.value = false;
  doSearch("");
}

function onSearchFocus() {
  isSearching.value = true;
}

function onSearchBlur() {
  isSearching.value = false;
  doSearch("");
}
</script>

<style lang="less" scoped>
:deep(.van-dropdown-menu__bar) {
  height: 32px;
  background: transparent;
  box-shadow: none;
}

:deep(.van-dropdown-menu__item) {
  padding: 0 8px;
  min-width: 100px;

  .van-dropdown-menu__title {
    font-size: 14px;
    color: #333;

    &::after {
      border-color: transparent transparent #666 #666;
    }

    &--active {
      color: #436bff;
    }
  }
}

.van-search {
  flex-grow: 1;
}

/deep/ .van-search__content {
  border: 1px solid #e5e5e5;
  background-color: #ffffff;
  border-radius: 8px;
}

/deep/ .van-dropdown-menu__bar {
  gap: 8px;
  min-height: 38px;
}

/deep/ .van-dropdown-menu__item {
  border-radius: 8px;
  border: 1px solid #e9e9e9;
  background-color: #ffffff;
}
</style>
